<template>
  <el-main v-if="hotel">
    <el-row>
      <el-col :span="18" :offset="3">
        <h2>{{ hotel.name }}</h2>
        <p>{{ hotel.address }}</p>
        <el-carousel height="400px">
          <el-carousel-item v-for="(item, index) in hotel.images" :key="index">
            <img :src="dialogImageUrl + item" alt="Hotel image" style="width: 100%; height: 100%">
          </el-carousel-item>
        </el-carousel>
        <h3>房间类型</h3>
        <el-table :data="rooms" style="width: 100%" stripe>
          <el-table-column prop="roomImages" label="图片">
            <template slot-scope="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="dialogImageUrl + scope.row.roomImages[0]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="房型" width="150">
          </el-table-column>
          <el-table-column prop="roomSize" label="平方" width="50">
          </el-table-column>
          <el-table-column prop="windows" label="窗户" width="50">
            <template slot-scope="scope">
              {{ getWindowsLabel(scope.row.windows) }}
            </template>
          </el-table-column>
          <el-table-column prop="smoking" label="是否禁烟" width="90">
            <template slot-scope="scope">
              {{ getSmokingLabel(scope.row.smoking) }}
            </template>
          </el-table-column>
          <el-table-column prop="breakfast" label="有无早餐" width="90">
            <template slot-scope="scope">
              {{ getBreakfastLabel(scope.row.breakfast) }}
            </template>
          </el-table-column>

          <el-table-column prop="flashLive" label="闪住" width="50">
            <template slot-scope="scope">
              {{ getFlashLiveLabel(scope.row.flashLive) }}
            </template>
          </el-table-column>
          <el-table-column prop="cancell" label="可否取消" width="90">
            <template slot-scope="scope">
              {{ getCancellLabel(scope.row.cancell) }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="80">
          </el-table-column>
          <el-table-column prop="remainingRoom" label="剩余房间" width="80">
          </el-table-column>
          <el-table-column label="选择" width="170">
            <template slot-scope="scope">
            <el-input-number
                size="small"
                v-model="scope.row.roomCount"
                :min="1"
                :max="scope.row.remainingRoom"
                :step="1">
            </el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="small" @click="bookRoom(scope.row)">预订</el-button>
            </template>
          </el-table-column>

        </el-table>
        <h3>酒店介绍</h3>
        <p>{{ hotel.hotelDesc }}</p>
      </el-col>
    </el-row>
  </el-main>
</template>
<script>
import axios from "axios";
export default {
  name: 'HotelDetail',
  data() {
    return {
      checkInTime : '',
      checkOutTime : '',
      gateway: 'http://localhost:8093/hotel/hotel',
      dialogImageUrl : 'http://rufnvmzv0.bkt.clouddn.com/',
      hotelId: -1,
      guests: -1,
      roomCount : 0, // 选择的房间数
      hotel: {
        id:-1,
        cityId:-1,
        name: '',
        address: '',
        hotelDesc:'',
        price:'',
        facility:[],
        images: [],
        star:-1
      },
      rooms: [
        {"bedInformation":-1,
          "breakfast":1,
          "cancell":1,
          "flashLive":1,
          "hotelId":-1,
          "id":1,
          "name":"测试房间",
          "peoples":-1,
          "price":128.3,
          "remainingRoom":12,
          "roomImages":[],
          "roomSize":12,
          "smoking":3,
          "windows":1,
          }
      ],
    };
  },
  computed: {
    getWindowsLabel() {
      return function(windows) {
        if (windows === 1) {
          return '有窗';
        } else if (windows === 2) {
          return '无窗';
        } else {
          return '未知';
        }
      };
    },
    getSmokingLabel(){
      return function (smoking) {
        if(smoking === 1){
          return '禁烟';
        }else if (smoking === 2) {
          return '不禁烟';
        }else {
          return '部分禁烟';
        }
      }
    },
    getBreakfastLabel(){
      return function (breakfast) {
        if(breakfast === 1){
          return '有早餐';
        }else if (breakfast === 2) {
          return '无早餐';
        }
      }
    },
    getFlashLiveLabel(){
      return function (flashLive) {
        if(flashLive === 1){
          return '支持';
        }else if (flashLive === 2) {
          return '不支持';
        }
      }
    },
    getCancellLabel(){
      return function (cancell) {
        if(cancell === 1){
          return '可取消';
        }else if (cancell === 2) {
          return '不可取消';
        }
      }
    }
  },
  methods: {
    incrementRoom(room) {
      if (room.roomCount < room.remainingRoom) {
        room.roomCount++;
      }
    },

    decrementRoom(room) {
      if (room.roomCount > 1) {
        room.roomCount--;
      }
    },


    // 获取酒店信息
    initHotel(){
      axios({
        url : this.gateway + '/hotel/selectHotelByHotelId',
        method : 'get',
        params: {
          id : this.hotelId
        }
      }).then(res => {
        this.hotel = res.data;
      })
    },
    // 获取房间信息
    initRooms(){
      axios({
        url : this.gateway + '/hotel/selectRoomOfHotel',
        method : 'get',
        params: {
          id : this.hotelId
        }
      }).then(res => {
        console.log("下面是房间的内容")
        console.log(res.data)
        this.rooms = res.data;
        console.log(this.rooms)
      })
    },
    bookRoom(room) {
      if(room.roomCount == 0 || room.roomCount == null){
        this.$message.error("请选择订房数量")
        return
      }
      // 这里可以跳转到预订页面
      console.log("预订房间", room);
      this.$router.push({
        name: 'HotelCreateOrder',
        params: {
          cityId : this.hotel.cityId, // 地区id
          hotelName: this.hotel.name, // 酒店名称
          hotelId: this.hotelId, // 酒店id
          checkInTime: this.checkInTime, // 时间[] 0号位是起始，1号位是截止
          checkOutTime: this.checkOutTime, // 时间[] 0号位是起始，1号位是截止
          hotelAddress : this.hotel.address, // 酒店详细位置
          roomCount : room.roomCount,// 订房数量
          roomId : room.id, // 房间id
          price : room.price, // 房间单价
          roomName : room.name // 房间类型
        }  // 如果你的路由需要参数，可以在这里传递
      });
    },
  },
  created(){
    this.hotelId = this.$route.params.hotelId;
    this.guests = this.$route.params.guests;
    this.checkInTime = this.$route.params.checkInTime;
    this.checkOutTime =  this.$route.params.checkOutTime;

    this.initHotel();
    this.initRooms();
  }
}
</script>
<style scoped lang="less">
.search-form {
  margin-bottom: 20px;
}
</style>